<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if IE 9]>         <html class="no-js lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">

    <title>IO GYM Care</title>

    <meta name="description" content="ProUI is a Responsive Bootstrap Admin Template created by pixelcave and published on Themeforest.">
    <meta name="author" content="pixelcave">
    <meta name="robots" content="noindex, nofollow">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">

    <!-- Icons -->
    <!-- The following icons can be replaced with your own, they are used by desktop and mobile browsers -->
    <link rel="shortcut icon" href="/img/favicon.png">
    <link rel="apple-touch-icon" href="/img/icon57.png" sizes="57x57">
    <link rel="apple-touch-icon" href="/img/icon72.png" sizes="72x72">
    <link rel="apple-touch-icon" href="/img/icon76.png" sizes="76x76">
    <link rel="apple-touch-icon" href="/img/icon114.png" sizes="114x114">
    <link rel="apple-touch-icon" href="/img/icon120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="/img/icon144.png" sizes="144x144">
    <link rel="apple-touch-icon" href="/img/icon152.png" sizes="152x152">
    <link rel="apple-touch-icon" href="/img/icon180.png" sizes="180x180">
    <!-- END Icons -->

    <!-- Stylesheets -->
    <!-- Bootstrap is included in its original form, unaltered -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <!-- Related styles of various icon packs and plugins -->
    <link rel="stylesheet" href="/css/plugins.css">

    <!-- The main stylesheet of this template. All Bootstrap overwrites are defined in here -->
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/app.css">
    <link rel="stylesheet" href="/css/themes.css">
    <script src="/js/vendor/modernizr-respond.min.js"></script>
    @include('layouts.jsput')
    <style>
        .btn-primary,
        .btn-primary:focus,
        .btn-primary.focus,
        .btn-primary:active,
        .btn-primary:active:hover
        .btn-primary:active:focus,
        .btn-primary.active,
        .btn-primary.active:hover,
        .btn-primary.active:focus,
        .open .btn-primary.dropdown-toggle,
        .open .btn-primary.dropdown-toggle:hover,
        .open .btn-primary.dropdown-toggle:focus,
        .open .btn-primary.dropdown-toggle.focus{
            background-color: #e67725!important;
            border-color: #e67725!important;
        }
        #page-content {
            background: #fff;
            padding:10px 0 1px 0;
        }
        .no-border {
            border: 0px;
        }
    </style>
</head>
<body>
{!! csrf_field() !!}
<script>
    //    define global token for JS useage
    var _token = "{{ csrf_token() }}";
    var __rolesAndPermissions = {!! json_encode(user_roles()) !!}
</script>
<div id="page-wrapper">
    <div class="preloader themed-background">
        <h1 class="push-top-bottom text-light text-center"><strong>Pro</strong>UI</h1>
        <div class="inner">
            <h3 class="text-light visible-lt-ie9 visible-lt-ie10"><strong>Loading..</strong></h3>
            <div class="preloader-spinner hidden-lt-ie9 hidden-lt-ie10"></div>
        </div>
    </div>
    <!-- END Preloader -->


    <div id="page-container" class="sidebar-partial sidebar-visible-lg sidebar-no-animations">


        <!-- Alternative Sidebar -->
        <div id="sidebar-alt">
            <!-- Wrapper for scrolling functionality -->
            <div id="sidebar-alt-scroll">
                <!-- Sidebar Content -->
                <div class="sidebar-content">
                    <!-- Sidebar Section -->
                    <a href="index.html" class="sidebar-title">
                        <i class="gi gi-cogwheel pull-right"></i> <strong>Header</strong>
                    </a>
                    <div class="sidebar-section">Section content..</div>
                    <!-- END Sidebar Section -->
                </div>
                <!-- END Sidebar Content -->
            </div>
            <!-- END Wrapper for scrolling functionality -->
        </div>
        <!-- END Alternative Sidebar -->

        <!-- Main Sidebar -->
        <div id="sidebar">
            <!-- Wrapper for scrolling functionality -->
            <div id="sidebar-scroll">
                <!-- Sidebar Content -->
                <div class="sidebar-content">
                    <!-- Brand -->
                    <a href="/" class="sidebar-brand">
                        <i class="gi gi-flash"></i><span class="sidebar-nav-mini-hide"><strong>GYM</strong>Care</span>
                    </a>
                    <!-- END Brand -->

                    <!-- User Info -->
                    <div class="sidebar-section sidebar-user clearfix sidebar-nav-mini-hide">
                        <div class="sidebar-user-avatar">
                            <a href="/admin/userPicture">
                                <img src="{{ $LoginUser->avatar }}" alt="avatar">
                            </a>
                        </div>
                        <div class="sidebar-user-name">{{ $LoginUser->name }}</div>
                    </div>
                    <!-- END User Info -->


                    <!-- Sidebar Navigation -->
                @include('layouts._proui_mobile_left_sidebar_menu')
                <!-- END Sidebar Navigation -->
                </div>
                <!-- END Sidebar Content -->
            </div>
            <!-- END Wrapper for scrolling functionality -->
        </div>
        <!-- END Main Sidebar -->



        <!-- Main Container -->
        <div id="main-container">
            <header class="navbar navbar-default">
                <!-- Left Header Navigation -->
                <ul class="nav navbar-nav-custom">
                    <!-- Main Sidebar Toggle Button -->
                    <li>
                        <a href="javascript:void(0)" onclick="App.sidebar('toggle-sidebar');this.blur();">
                            <i class="fa fa-bars fa-fw"></i>
                        </a>
                    </li>
                    <!-- END Main Sidebar Toggle Button -->
                </ul>
                <!-- END Left Header Navigation -->
            </header>
            <!-- END Header -->

            <!-- Page content -->
            <div id="page-content">
                <!-- Page Header -->
                @yield('PageContent')
            </div>
            <!-- END Page Content -->

            <!-- Footer -->
            <!-- <footer class="clearfix">
            </footer> -->
            <!-- END Footer -->
        </div>
        <!-- END Main Container -->
    </div>

    <!-- END Page Container -->
</div>
<!-- END Page Wrapper -->

<a href="#" id="to-top"><i class="fa fa-angle-double-up"></i></a>


<!-- jQuery, Bootstrap.js, jQuery plugins and Custom JS code -->
<script src="/js/vendor/jquery-1.12.0.min.js"></script>
<script src="/js/vendor/bootstrap.min.js"></script>
<script src="/js/vendor/jquery.form.js"></script>
<script src="/js/vendor/fetch.js"></script>
<script type="text/javascript" src="/js/messages.js"></script>
<script>
    Lang.setLocale('zh')
</script>
<script src="/js/plugins.js"></script>
<script src="/js/app.js"></script>
<script src="/js/permissionHelper.js"></script>

@yield('scripts')

</body>
</html>
